<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/exercise/CSS/css/reset.css">
    <style>
        .box{
            /* 设置图片的宽度 */
            width: 200px;
            /* 设置图片的高度 */
            height: 500px;
            /* 裁剪溢出的内容 */
            overflow:hidden;
            /* 让ul在页面中居中(实践中不需要这么写) */
            margin: 0 auto;
        }
        /* 设置ul的位置 */
        .box li:not(:last-child){
            margin-bottom: 10px;
        }

        /* 设置图片的大小 */
        .box img{
            width: 100%;
        }

    </style>
</head>
<body>
    <li class="box">
        <ul>
            <a href="#">
                <img src="https://img30.360buyimg.com/da/s380x300_jfs/t1/108702/1/14066/48798/5ea43bc1E397b35b5/0d5363f783902332.png.webp" alt="">
            </a>
        </ul>
        <ul>
            <a href="#">
                <img src="https://img12.360buyimg.com/babel/s380x300_jfs/t1/152314/13/19839/57522/603e118dE941f0ce9/fdff58457adbef3e.jpg.webp" alt="">
            </a>
        </ul>
        <ul>
            <!-- #是回到页面顶端 -->
            <a href="#">
                <!-- 图片的来源 -->
                <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/165019/40/8639/60165/603d92e5E1d9852b8/2006d88391f60fe8.jpg.webp" alt="">
            </a>
        </ul>
    </li>
</body>
</html>